<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2023-01-05 19:29:09
 * @LastEditors: Badcandy 568197314@qq.com
 * @LastEditTime: 2023-01-11 20:03:16
 * @FilePath: \dcollege\src\views\note\notePage\note.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <div class="note-bg">
    <var-app-bar
      title="笔记本"
      title-position="center"
      text-color="#000"
      color="white"
      :elevation="false"
    >
      <template #left>
        <var-button @click="goBack" color="#fff" text-color="#000" round text>
          <var-icon name="chevron-left" :size="24" />
        </var-button>
      </template>
    </var-app-bar>

    <div class="note-content">
      <div class="note-search">
        <var-input
          :hint="false"
          :line="false"
          placeholder="搜索"
          v-model="value"
        />
      </div>
      <div class="note">
        <noteCard  v-for="item in noteDetails" v-bind="item" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const value = ref("");


function goBack() {
  router.go(-1);
}

const noteDetails = ref([
  {
    title: "本草纲目",
    content:
      "如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~",
    date: "2023/1/1",
  },
  {
    title: "本草纲目",
    content:
      "如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~",
    date: "2023/1/1",
  },
  {
    title: "本草纲目",
    content:
      "如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~",
    date: "2023/1/1",
  },
  {
    title: "本草纲目",
    content:
      "如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~",
    date: "2023/1/1",
  },
]);
</script>

<style lang="less" scoped>
.note-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
}
.note-content {
  position: relative;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.note-search {
  position: relative;
  background: rgb(242, 242, 255);
  padding-left: 0.625rem;
  border-radius: 15px;
  margin-bottom: 5%;
}
.note {
  display: grid;
  grid-template-columns: repeat(2, 49%);
  grid-row-gap: 0.625rem;
  grid-column-gap: 0.625rem;
}
</style>
